<template>
  <div
    id="main18"
    class="main"
  />
</template>

<script>
export default {
  mounted () {
    this.echartsFn()
  },
  methods: {
    echartsFn () {
      var chartDom = document.getElementById('main18')
      var myChart = this.$echarts.init(chartDom)
      var option
      const piePatternImg = new Image()
      piePatternImg.src = require('@/assets/pie-bg.jpg') // 饼图背景
      const bgPatternImg = new Image()
      bgPatternImg.src = require('@/assets/bg-hpic.jpg') // 整体背景
      var itemStyle = {
        normal: {
          opacity: 1,
          borderRadius: 10,
          color: {
            image: piePatternImg,
            repeat: 'repeat'
          },
          borderWidth: 3,
          borderColor: '#2a2a34',
          shadowColor: '#FFF',
          shadowBlur: 1,
          shadowOffsetY: 0,
          shadowOffsetX: 0
        }
      }
      option = {
        backgroundColor: {
          image: bgPatternImg,
          repeat: 'repeat'
        },
        title: [
          {
            text: 'PAPER ELEMENTS',
            x: '20',
            y: '20',
            textStyle: {
              fontSize: '20',
              fontWeight: '100',
              color: '#c795bb',
              textAlign: 'center',
              textShadowColor: '#000',
              textShadowBlur: '1',
              textShadowOffsetX: 1,
              textShadowOffsetY: 1
            }
          },
          {
            text: 'SHAPE OF HEART',
            x: '20',
            y: '45',
            textStyle: {
              fontSize: '24',
              fontWeight: '300',
              color: '#d8a9bd',
              textAlign: 'center',
              textShadowColor: '#000',
              textShadowBlur: '1',
              textShadowOffsetX: 1,
              textShadowOffsetY: 1
            }
          }
        ],
        series: [
          {
            name: 'pie',
            type: 'pie',
            selectedMode: 'single', // multiple
            selectedOffset: 10, // 距离
            label: {
              fontSize: 18,
              color: '#fff'
            },
            labelLine: {
              length: 10,
              length2: 45,
              smooth: true,
              lineStyle: {
                width: 2
              }
            },
            data: [
              { value: 1024, name: 'A' },
              { value: 689, name: 'B' },
              { value: 602, name: 'C' },
              { value: 501, name: 'D', selected: true },
              { value: 299, name: 'E' }
            ],
            itemStyle: itemStyle
          }
        ]
      }

      option && myChart.setOption(option)
    }
  }
}
</script>

<style>

</style>
